import {
  MaterialTopTabBarProps,
  MaterialTopTabBar,
} from '@react-navigation/material-top-tabs';
import React, {useMemo} from 'react';
import {View, StyleSheet, Text} from 'react-native';
import {getStatusBarHeight} from 'react-native-iphone-x-helper';
import Touchable from './../../components/Touchable';
// import LinearGradient from 'react-native-linear-gradient'; //因为react-native不支持渐变色  所以需要第三方库来支持
import LinearAnimatedGradientTransition from 'react-native-linear-animated-gradient-transition'; //因为react-native不支持渐变色  所以需要第三方库来支持  带有动画效果
import {connect, ConnectedProps} from 'react-redux';
import {RootState} from '@/models/index';
import {getActiveRouteName} from '@/utils/index';

const mapStateToProps = (state: RootState, props: MaterialTopTabBarProps) => {
  const routeName = getActiveRouteName(props.state);
  const modelState = state[routeName];
  return {
    gradientVisible: modelState.gradientVisible,
    learColors:
      modelState?.carousels?.[modelState.activeCarouselIndex]?.colors ||
      undefined,
  };
};
const connector = connect(mapStateToProps);
type modalProps = ConnectedProps<typeof connector>;
interface IProps extends MaterialTopTabBarProps, modalProps {}

const TopTabBarWrapper: React.FC<IProps> = props => {
  const {learColors = ['#ccc', '#e2e2e2'], gradientVisible, ...reset} = props;

  const linearGradient = () => {
    if (gradientVisible) {
      return (
        <LinearAnimatedGradientTransition
          colors={learColors}
          style={styles.gradient}
        />
      );
    }
    return null;
  };

  const textStyleObj = useMemo(() => {
    let {indicatorStyle} = props;
    let textStyle = styles.text;
    let activeTinColor = '#333';
    if (gradientVisible) {
      textStyle = styles.whiteText;
      activeTinColor = '#FFF';
      if (indicatorStyle) {
        indicatorStyle = StyleSheet.compose(
          indicatorStyle,
          styles.whiteBackgroundColor,
        );
      }
    }
    return {
      textStyle,
      activeTinColor,
      indicatorStyle,
    };
  }, [gradientVisible, props]);

  const goCategory = () => {
    const {navigation} = props;
    navigation.navigate('category');
  };

  return (
    <View style={styles.container}>
      {linearGradient()}
      <View style={styles.topTabBarView}>
        <MaterialTopTabBar
          {...reset}
          activeTintColor={textStyleObj.activeTinColor}
          style={styles.tabBar}
          indicatorStyle={textStyleObj.indicatorStyle}
        />
        <Touchable style={styles.categoryBtn} onPress={goCategory}>
          <Text style={textStyleObj.textStyle}>分类</Text>
        </Touchable>
      </View>
      <View style={styles.bottom}>
        <Touchable style={styles.searchBtn}>
          <Text style={textStyleObj.textStyle}>搜索</Text>
        </Touchable>
        <Touchable style={styles.historyBtn}>
          <Text style={textStyleObj.textStyle}>历史记录</Text>
        </Touchable>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingTop: getStatusBarHeight(),
    backgroundColor: '#fff',
  },
  gradient: {
    ...StyleSheet.absoluteFillObject,
    height: 260,
  },
  topTabBarView: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  categoryBtn: {
    paddingHorizontal: 10,
    borderLeftWidth: StyleSheet.hairlineWidth,
    borderLeftColor: '#ccc',
  },
  tabBar: {
    elevation: 0,
    flex: 1,
    overflow: 'hidden',
    backgroundColor: 'transparent',
  },
  bottom: {
    flexDirection: 'row',
    paddingVertical: 7,
    paddingHorizontal: 15,
    alignItems: 'center',
  },
  searchBtn: {
    flex: 1,
    paddingLeft: 12,
    height: 30,
    justifyContent: 'center',
    borderRadius: 15,
    backgroundColor: 'rgba(0, 0, 0, 0.1)',
  },
  historyBtn: {
    marginLeft: 24,
  },
  text: {
    color: '#333',
  },
  whiteText: {
    color: '#FFF',
  },
  whiteBackgroundColor: {
    backgroundColor: '#FFF',
  },
});

export default connector(TopTabBarWrapper);
